<template>
	<div>
		<Gheader :showheader="Gheaderdata"></Gheader>
		<div class="hh">加入购物车成功</div>
		<scroll class="wrap">
			<div>
				<!--轮播图-->
				<Swiper v-if="pages.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
			        <Slide  v-for="(item,index) in pages" :key="index">	        	
			        	<div class="circon">
			        		<img :src="item"  class="cir"/>
			        	</div>
			            
			        </Slide>
			   </Swiper>
				<div class="box">
					<div class="shopping">
						
						<div class="shopcont" >
							<div class="price">抢购价: ¥ {{buyingprice}}</div>
							<div class="right">
								<span class="time">今天15:00限量抢购</span>
								<span class="remind">提醒我</span>
							</div>

						</div>
						
					</div>
					<!--价格信息-->
					<div class="goodsprice contwidth">
						<div class="goodspricecont">
							<div class="goodstitle">
								<div class="flag">
									<img :src="nationalflag" />
								</div>
								<div class="introtitle">
									<em>{{areaType}}直邮</em> {{goodsname}} 
								</div>
							</div>
							<div class="priceinfo">
								<p>¥{{price}}</p>
								<p>关税 : {{taxes}}<p>
								<p>邮费 : ¥ {{postage}}</p>
							</div>
							<div class="details" @click="totax()">详情></div>
						</div>
					</div>
					<!--积分购-->
					<div class="contwidth">
						<div class="integral-cot">
							<span class="integralimg"></span>
							<span class="integralcot">50000积分可抵500元,限购1件</span>
						</div>

					</div>

					<!--服务-->
					<div class="contwidth">
						<div class="contwidthcot">
							<span class="service1" @click="toserver()"><em></em>不支持7天无忧退换</span>
							<span class="service2" @click="toserver()"><em></em>海外直邮</span>
							<span class="service3" @click="toserver()"><em></em>正品保证 ></span>
						</div>
					</div>

					<!--添加地址-->
					<div class="address contwidth">
						<div class="contwidthcot">
							<div class="flag">
								<img :src="nationalflag" />
							</div>
							<div class="introtitle addressinfo">
								<div class="addp">
									<p>直邮,下单时需要提供真实姓名和身份证号以及收货地址</p>
									<p>请先去添加并填写这些信息</p>
								</div>
								<div class="addressbtn" @click="toaddress()">去添加</div>
							</div>
						</div>
					</div>

					<!--阿拉粉心得-->
					<div class="tips contwidth">
						<div class="contwidthcot">
							<span class="tipfont">阿拉粉心得</span>
							<span class="tipmore">查看更多 ></span>
						</div>
					</div>
					<!--阿拉粉心得评论-->
					<div class="contwidth">
						<div class="commentscot contwidthcot">
							<div class="comments-cont" v-for="item in msg">
								<p>{{msg.personmsg}}</p0>
								<div class="comments-person">
									<span class="person">
										<img :src="msg.personphoto" alt="" />
									</span>
									<span class="pername">{{msg.pername}}</span>
								</div>
							</div>
						</div>
					</div>
					<!--品牌名字-->
					<div class="contwidth">
						<div class="contwidthcot">
							<div class="brandtop">
								<div class="mark" @click="tobrandinfor()">品牌标志</div>
								<div class="markname">
									<span @click="tobrandinfor()">{{brandname}}</span>
									<span><strong>+</strong>关注</span>
									<p>查看<em>{{num}}</em>件商品</p>

								</div>
							</div>
						</div>
						<div class="contwidthcot">
							<p class="font-p">{{brandintro}}</p>
						</div>
						<div class="othergoods">
							<div class="contwidthcot othergoodscot">
								<div class="markimg" v-for="item in newbrandArr">
									<img :src="item.imgurl" class="markimgone" @click="aa(item.goodsid)"/>
									<p class="othername">{{item.goodsname}}</p>
									<p class="otherprice">¥{{item.goodsprice}}</p>
								</div>
							</div>

						</div>
					</div>
					
					<!--商品具体信息-->
					<div class="goodsinfo">
						<div class="goodsinfocot">
							<span  class="tipfont">商品描述</span>
							<p class="font-p tipfont-p">{{goodsintro}}</p>
							<span  class="tipfont">使用方法</span>
							<ul class="tipfont-p">
								<li>1.该模块用来介绍商品的使用方法</li>
								<li>2.该模块的大小同样取决于该使用方法的内容的多少</li>
								<li>3.所以该模块活动性比较大</li>
							</ul>
							<span  class="tipfont">商品图片</span>
							
							<div class="contwidthcot tipfont-p">
								<div class="img-goods">
									<p>该模块主要用于上面产品的产品展示图,该模块的大小取决于该商品图片长度的多少,该模块活动性比较大,应预留足够的大小</p>
									<div class="goods-image">
										<img :src="imgurl" alt=""/>
									</div>
									<div class="goods-image">
										<img :src="imgurl" alt=""/>
									</div>
								</div>
								
							</div>
						
							
						</div>
						
					</div>
					
					<!--阿拉粉再买-->
					<div class="tips contwidth">
						<div class="contwidthcot">
							<span class="tipfont">阿拉粉在买</span>
						</div>
					</div>
					<div class="othergoods othergoods-two" >
							<div class="contwidthcot othergoodscot">
								<div class="markimg" v-for="item in newbrandArr">
									<img :src="item.imgurl" class="markimgone"  @click="aa(item.goodsid)"/>
									<p class="othername">{{item.goodsname}}</p>
									<p class="otherprice">¥{{item.goodsprice}}</p>
								</div>
							</div>

						</div>
						
						<!--服务承诺-->
						<div class="tips contwidth">
							<div class="contwidthcot">
								<span class="tipfont">服务承诺</span>
							</div>
						</div>
						<div class="othergoods othergoods-two" >
							<div class="contwidthcot othergoodscot">
								<div class="promise-cot">
									<div class="promise1 promise">
										<span><img src="../../assets/D-img/正品1.png" alt="" /></span>
										<p>正品保证</p>
									</div>
									<div class="promise2 promise">
										<span><img src="../../assets/D-img/飞机1.png" alt="" /></span>
										<p>海外直邮</p>
									</div>
									<div class="promise3 promise">
										<span><img src="../../assets/D-img/补贴.png" alt="" /></span>
										<p>超市发送补贴</p>
									</div>
									<div class="promise4 promise">
										<span><img src="../../assets/D-img/承包.png" alt="" /></span>
										<p>PICC承担</p>
									</div>
								</div>
								
							</div>

						</div>
						
						<!--小贴士-->
						<div class="added">
							<div class="addedcot">
								<div class="whitebor"></div>
								<div class="graybcg"></div>
								<div class="blank"></div>
								<div class="lamp">
									<img src="../../assets/D-img/灯.png" alt="" />
									<span>小贴士</span>
								</div>
								<p class="tag">运费相关:英国直邮商品相关运费为50元</p>
								<p class="tag">价格说明:划线价、国内参考价、店头价可能是品牌专柜价、吊牌价或品牌商提供的指导价等价格,其受国家地区、事件和市场行情波动影响而可能与您购物时看到的不一致,改价格仅提供参考</p>
								<p class="tag">商品包装:海外商品包装更换较为频繁，因此顾客您收到的货品有可能与图片不完全 致,页面图片及描述仅供参考,请以您最终收到的实物为准，由此给您带来的不便请您多谅解。</p>
								<p class="tag">服务承诺:阿拉灯承诺站内销售商品均为海外原装正品，并会持续为顾客们带来海外最新商品。</p>
								<p class="tagone">该处模块大下跟该处内容多少有关，内容多，模块大，反之相反</p>
							</div>
						</div>
						
				</div>

			</div>
		</scroll>
		<!--底部购物车-->
		<div class="shopcar">
			<div class="shopcar-l">
				<img src="../../assets/D-img/客服.png"/>
				<span>在线客服</span>
			</div>
			<div class="shopcar-r" @click="toCar">加入购物车</div>	
		</div>
		
		<!--遮罩-->
		<div class="mask" @click="backhome()"></div>
		<!--点击之后的弹框  服务说明-->
		
			<div class="bounced">
			<div class="bouncedcot">
				<div class="bouncedtitle">服务说明
					<span @click="remove()">
						<img src="../../assets/D-img/删除.png"/>
					</span>
				</div>
				
			</div>
			<hr />
			<scroll class="scroll-cli" ref="zwl1">
			<ul class="bounded-ul">
					<li class="bounded-li">
						<div class="bouncedcot-l">
							<img src="../../assets/D-img/不支持.png"/>
						</div>
						<div class="bouncedcot-r">
							<h2>不支持7天无忧退换</h2>
							<p>该商品特殊性,一 经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附属品。</p>
						</div>
					</li>
					<li class="bounded-li">
						<div class="bouncedcot-l">
							<img src="../../assets/D-img/飞机.png"/>
						</div>
						<div class="bouncedcot-r">
							<h2>海外直邮</h2>
							<p>下单后英国直邮商品平均7-10个工作日发货,发货后平均12-20个工作日到货,特殊情况除外。包裹将由专业国际物流公司为您发货,无法送达的地址可能会转为其他物流。</p>
						</div>
					</li>
					<li class="bounded-li bounded-line">
						<div class="bouncedcot-l">
							<img src="../../assets/D-img/正品.png"/>
						</div>
						<div class="bouncedcot-r">
							<h2>正品保证</h2>
							<p>本商品绝对正品保证</p>
						</div>
					</li>
				</ul>
			</scroll>
			
		</div>
		
		
		<!--点击之后的弹框  税率说明-->
		
			<div class="taxation">
			<div class="taxationcot">
				<div class="taxationtitle">税率说明
					<span @click="remove()">
						<img src="../../assets/D-img/删除.png"/>
					</span>
				</div>
				
			</div>
			<hr />
			<scroll class="scroll-cli" ref="zwl">
			<ul class="taxation-ul">
					<li class="taxation-li">
						<div class="taxationcot-l">
							商品进口税
						</div>
						<div class="taxationcot-r">
							<p class="taxationcot-imp">因您所购买的商品可能适用不同税率，可能导致无法全额包税,您仍需再行支付剩余税款(如有)详见下单页面。</p>
						</div>
					</li>
					<li class="taxation-li">
						<div class="taxationcot-l">
							进口税税率
						</div>
						<div class="taxationcot-r">
							<h2>12%</h2>
							<p>(中国海关规定,不同类目的商品征收税率不同,该商品的征收税率为12%)</p>
						</div>
					</li>
					<li class="taxation-li taxation-line">
						<div class="taxationcot-l">
						进口税说明
						</div>
						<div class="taxationcot-r">
							<h2>进口税=商品完税价格(包括运费)*税率</h2>
							<p>(完税价格有海关最终认定)</p>
						</div>
					</li>
				</ul>
			</scroll>
			
		</div>
		
		
	</div>

</template>

<script>
	import Scroll from "../../../base/Scroll"
	import Gheader from "../G-person/person-center/Gheader"
	import Slide from "../../../base/ZSlide"
	import Swiper from "../../../base/ZSwiper"
	export default {
		name: "Goodsdetails",
		data() {
			return {
				msg:{
					personmsg:"颜色涂抹上去看着很漂亮,棒棒哒!",
					personphoto:"../../../static/D-img/头像.png",
					pername:"霜霜"
				},		
				Gheaderdata: {
					word: '商品详情',
					left: [true, false, false],
					right: [false, false, true, true, true, false],
					leftword: "",
					rightword1: "",
					rightword2: ""
				},
				newbrandArr:[],
				pages: [],
				buyingprice:"",
				nationalflag:"",
				areaType:"",
				areaType:"",
				goodsname:"",
				price:"",
				postage:"",
				imgurl:"",
				goodsintro:"",
				brandname:"",
				brandintro:"",
				taxes:"",
				num:""
				
			}
		},
		created:function(){
			var id = this.$route.params.GoodsId;
			console.log(id)
			this.axios.post("/api/goodsdetails",{id:id}).then(function(data){
				console.log(data);
				this.pages = data.data.allArr.lunboArr;
				this.buyingprice = data.data.allArr.buyingprice;
				this.nationalflag = data.data.allArr.nationalflag;
				this.areaType = data.data.allArr.areaType;
				this.goodsname = data.data.allArr.goodsname;
				this.price = data.data.allArr.price;
				this.postage = data.data.allArr.postage;
				this.imgurl = data.data.allArr.imgurl;
				this.goodsintro = data.data.allArr.goodsintro;
				this.brandname = data.data.allArr.brandname;
				this.brandintro = data.data.allArr.brandintro;
				this.newbrandArr = data.data.allArr.newbrandArr;
				this.id = data.data.allArr.id;
				this.taxes = data.data.allArr.taxes;
				this.num = data.data.allArr.num;
				}.bind(this))
		},
		components: {
			Gheader,
			Scroll,
			Swiper,
			Slide
		},
		methods:{
			aa:function(id){
				window.location.href = "#/Goodsdetails/"+id ;
			},
			//去购物车
			toCar:function(){
				if(this.cookie.hasKey("useraccount")){
					var shoppingCarName=this.$store.state.personInfor[0].login.shoppingCarName;
					this.axios.post("/api/changeCar",
						{
							sign:"添加数据",
							shoppingCarName:shoppingCarName,
							id:this.$route.params.GoodsId
						}).then(function(data){
							console.log(this.$route.params.GoodsId)
						this.$store.commit('changeCarData',data.data);
					}.bind(this))
				}else{
					this.$router.push({path:"/PersonalCenter/1"})
				}
				

				$(".hh").css("display","block");
				setTimeout(function(){
					$(".hh").css("display","none");
				},1000)


			},
			//点击跳转添加地址页面
			toaddress:function(){
				this.$router.push({
					path:"/AddNewAddress"
				})
			},
			//点击跳转商品品牌页
			tobrandinfor:function(){
				var brand = this.brandname;
				this.$router.push({
					path:"/Goodsname/"+brand
				})
			},
			//弹出弹框内容
			toserver:function(){
				$(".bounced").css("display","block");
				$(".mask").css("display","block");
				this.$refs.zwl1.refresh();
			},
			//弹出税率内容
			totax:function(){
				$(".taxation").css("display","block");
				$(".mask").css("display","block");
				this.$refs.zwl.refresh();
			},
			//删除弹框内容
			remove:function(){
				$(".bounced").css("display","none");
				$(".taxation").css("display","none");
				$(".mask").css("display","none");
			},
			//点击背景回到原页面
			backhome:function(){
				$(".bounced").css("display","none");
				$(".taxation").css("display","none");
				$(".mask").css("display","none");
			}
		}
	}
</script>

<style scoped>
	.wrap {
		overflow: hidden;
		height: 80vh;
		background: #f2f2f2;
	}
	.scroll-cli{
		overflow: hidden;
		height: 43vh;
	}
	.box {
		width: 100%;
		background-color: #f2f2f2;
	}
	/*轮播图*/
	.circon{
		width: 100%;
		background: white;
	}
	.cir{
		display: block;
		margin: 0 auto;
		padding: 1.9rem 0;
		height: 13rem;
	}
	
	
	.contwidth {
		width: 100%;
		background: white;
		border-bottom: 1px solid #ccc;
	}
	
	.contwidthcot {
		width: 94%;
		margin: 0 auto;
		padding: 0.7rem 0;
	}
	
	.shopping {
		width: 100%;
		background: #e53e42;
		color: white;
		font-weight: 100;
	}
	
	.shopcont {
		width: 94%;
		margin: 0 auto;
		line-height: 4rem;
		overflow: hidden;
	}
	
	.price {
		float: left;
		font-size: 1.2rem;
		
	}
	
	.right {
		float: right;
	}
	
	.time {
		font-size: 0.8rem;
	}
	
	.remind {
		display: inline-block;
		width: 5rem;
		background: white;
		color: red;
		font-size: 0.8rem;
		line-height: 1.7rem;
		text-align: center;
		border-radius: 0.8rem;
		font-weight: 300;
	}
	.buying{
		font-size:1.4rem;
		font-weight: 500;
	}
	.goodsprice {
		padding-bottom: 0.5rem;
	}
	
	.goodspricecont {
		width: 94%;
		margin: 0 auto;
		padding-top: 0.6rem;
	}
	
	.goodstitle {
		padding-bottom: 0.5rem;
		overflow: hidden;
	}
	
	.flag {
		display: inline-block;
		vertical-align: top;
		width: 2rem;
		float: left;
	}
	
	.flag img {
		width: 100%;
	}
	
	.introtitle {
		padding-left: 0.4rem;
		vertical-align: top;
		display: inline-block;
		width: 90%;
		overflow: hidden;
		font-size: 1.2rem;
		font-style: normal;
		float: right;
	}
	
	.introtitle em {
		color: #e53e42;
		font-style: normal;
	}
	
	.priceinfo {
		display: inline-block;
		width: 7rem;
		vertical-align: middle;
		display: inline-block;
	}
	
	.priceinfo p:nth-child(1) {
		font-size: 1.5rem;
		padding-left: 0.5rem;
		color: #e53e42;
		font-weight: 500;
	}
	
	.priceinfo p:nth-child(n+2) {
		font-size: 1.2rem;
		color: #4d4d4d;
	}
	
	.details {
		display: inline-block;
		width: 4rem;
		line-height: 1.2rem;
		font-size: 0.7rem;
		border-radius: 0.2rem;
		border: 1px solid #E53E42;
		vertical-align: middle;
		text-align: center;
		color: #E53E42;
	}
	/*积分购*/
	
	.integral-cot {
		width: 94%;
		margin: 0 auto;
		padding: 0.7rem 0;
	}
	
	.integralimg {
		display: inline-block;
		width: 4rem;
		height: 2rem;
		background: url(../../assets/D-img/积分购.png) no-repeat 100% center;
		background-size: 100%;
		font-style: normal;
		vertical-align: middle;
	}
	
	.integralcot {
		vertical-align: middle;
		padding-left: 1rem;
		font-size: 1.3rem;
		font-weight: 500;
	}
	/*服务*/
	
	.contwidthcot span em {
		font-style: normal;
		display: inline-block;
		width: 1.3rem;
		height: 1.3rem;
		margin-right: 0.3rem;
		vertical-align: middle;
		margin-bottom: 0.3rem;
	}
	
	.service1 em {
		background: url(../../assets/D-img/不支持.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.service2 em {
		background: url(../../assets/D-img/飞机.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.service3 em {
		background: url(../../assets/D-img/正品.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.contwidthcot span {
		vertical-align: middle;
		color: #333;
		font-weight: 300;
		font-size: 1rem;
	}
	
	.contwidthcot span:hover {
		color: #D72532;
	}
	
	.service1 {
		width: 41%;
	}
	
	.service2 {
		width: 23%;
		padding-left: 4%;
	}
	
	.service3 {
		float: right;
		padding-left: 2%;
	}
	/*添加地址*/
	
	.address {
		overflow: hidden;
		padding-bottom: 1rem;
		position: relative;
	}
	
	.addressinfo p {
		font-size: 1.1rem;
		color: #e53e42;
	}
	
	.addressbtn {
		width: 4rem;
		line-height: 1.5rem;
		font-size: 1rem;
		position: absolute;
		bottom: 0.5rem;
		right: 0.5rem;
		text-align: center;
		color: #e53e42;
		border: 1px solid #E53E42;
	}
	
	.tips {
		margin-top: 0.5rem;
	}
	
	.tipfont {
		font-size: 1.4rem;
		padding-left: 0.5rem;
		border-left: 3px solid #E53E42;
	}
	
	.tipmore {
		float: right;
		font-size: 1.1rem;
	}
	
	.commentscot {
		display: flex;
		justify-content: space-between;
	}
	
	.comments-cont {
		width: 30%;
		height: 8rem;
		border: 1px solid #ccc;
		position: relative;
	}
	
	.comments-cont p {
		margin-left: 0.3rem;
		font-size: 1.15rem;
	}
	
	.comments-person {
		position: absolute;
		bottom: 0.8rem;
		left: 0.8rem;
	}
	
	.person {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		border: 1px solid #ccc;
		border-radius: 50%;
		position: relative;
		vertical-align: middle;
		margin-right: 0.5rem;
	}
	
	.person img {
		width: 60%;
		/*height:80%;*/
		position: absolute;
		left: 0;
		top: -0.1rem;
		bottom: 0.1rem;
		right: 0;
		margin: auto;
	}
	
	.pername {
		font-size: 1rem;
	}
	
	.brandtop {
		width: 100%;
		position: relative;
	}
	
	.mark {
		display: inline-block;
		font-size: 0.8rem;
		line-height: 1.1rem;
		width: 2rem;
		height: 2rem;
		padding: 1rem;
		border: 1px solid #ccc;
		vertical-align: middle;
	}
	
	.markname {
		display: inline-block;
		vertical-align: middle;
		padding-left: 0.5rem;
		width: 60%;
	}
	
	.markname span:nth-child(1) {
		font-size: 1.4rem;
		vertical-align: middle;
	}
	
	
	.markname span:nth-child(2) {
		width: 4rem;
		line-height: 1.5rem;
		text-align: center;
		border: 1px solid #E53E42;
		display: inline-block;
		border-radius: 1rem;
		font-size: 1rem;
		color: #E53E42;
		position: absolute;
		top: 0.1rem;
		right: 0;
	}
	
	.markname strong {
		font-size: 1.7rem;
		color: #E53E42;
	}
	
	.markname p {
		font-size: 1.1rem;
	}
	
	.markname p em {
		font-style: normal;
		color: #E53E42;
	}
	
	.font-p {
		font-size: 1rem;
		text-indent: 2em;
	}
	
	.othergoods {
		border-top: 1px solid #ccc;
	}
	.othergoodscot{
		display: flex;
		justify-content: space-between;
	}
	.markimg{
		width: 33%;
		text-align: center;
	}
	.markimg img{
		width: 80%;
		height: 16vh;
	}
	.markimg p{
		font-size: 1rem;	
	}
	.othername{
		margin-top: 0.5rem;
	}
	.otherprice{
		color: #E53E42;
		margin:0.2rem 0 0.5rem 0;
	}
	.goodsinfo{
		width: 100%;
		background: white;
		margin-top: 0.5rem;
		
	}
	.goodsinfocot{
		width: 94%;
		margin: 0 auto;
		padding: 0.7rem 0;
	}
	.tipfont-p{
		margin: 0.5rem 0;
		border-top: 1px solid #ccc; 
		padding: 0.5rem 0;
		font-size: 1.1rem;
		text-indent: 2em;
	}
	.img-goods{
		width: 94%;
		margin: 0 auto;
	}
	.goods-image{
		width: 100%;
		text-align: center;
	}
	.goods-image img{
		width: 28%;
		margin-bottom: 1rem;
	}
	.othergoods-two{
		background: white;
		border: 0;
	}
	.promise-cot{
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content:space-between;
		text-align: center;
	}
	.promise{
		/*height: 12vh;*/
		font-size: 1rem;
		text-align: center;
	}

	.promise1{
		width: 23%;
	}
	.promise1 img{
		width: 50%;
	}
	.promise2{
		width: 23%;
	}
	.promise2 img{
		width: 50%;
	}
	.promise3{
		width: 29%;
	}
	.promise3 img{
		width: 40%;
	}
	.promise4{
		width: 25%;
	}
	.promise4 img{
		width: 80%;
		padding-top: 11%;
	}
	.promise4  p{
		margin-top: 0.2rem;
	}
	.added{
		width: 100%;
	}
	.addedcot{
		width: 94%;
		margin: 0 auto;
		position: relative;
		
	}
	.whitebor{
		width: 40%;
		height: 2rem;
		background: white;
		border: 1px solid #808080;
		margin: 0 auto;
		margin-top: 0.5rem;
	}
	.graybcg{
		width: 40%;
		height: 2rem;
		background: #808080;
		margin: 0 auto;
		position: absolute;
		top: 0.3rem;
		left: 27vw;
	}
	.blank{
		width: 80%;
		margin: 0 auto;
		border-bottom: 1px solid #CCCCCC;
		position: absolute;
		top: 1.4rem;
		left: 10vw;
	}
	.lamp{
		width: 25%;
		height: 2em;
		font-size: 1rem;
		background: #808080;
		line-height: 1.6rem;
		position: absolute;
		top: 0.3rem;
		left: 36%;
	}
	.lamp img{
		width: 2rem;
		height: 90%;
		vertical-align: middle;
		padding-left: 10%;
	}
	.lamp span{
		display: inline-block;
		margin-top: 0.2rem;
		vertical-align: middle;
		color: white;
	}
	.tag{
		font-size: 1rem;
		margin: 0.8rem 0;
		color: #4d4d4d;
	}
	.tagone{
		color: #e53e42;
		font-size: 1rem;
	}
	
	
	
	/*购物车*/
	.shopcar{
		width: 100%;
		height: 10vh;
		overflow: hidden;
		border-top: 0.2px solid #ccc;  
	}
	.shopcar-l{
		float: left;
		width: 50%;
		line-height: 10vh;
		text-align: center;
	}
	.shopcar-l img{
		width: 16%;
		vertical-align: middle;
		padding-right: 0.5rem;
	}
	.shopcar-l span{
		vertical-align: middle;
		color: #4d4d4d;
		font-size: 1.6rem;
	}
	.shopcar-r{
		float: right;
		width: 50%;
		line-height: 10vh;
		background: #e53e42;
		text-align: center;
		color: white;
		font-size: 1.5rem;
		font-weight: 300;
	}
	/*遮罩*/
	.mask{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		background: black;
		opacity: 0.3;
		display: none;
	}
	
	/*点击后的弹框*/
	.bounced{
		width: 100%;
		height: 50vh;
		background: white;
		position: absolute;
		bottom: 0;
		display: none;
	}
	.bouncedcot{
		width: 94%;
		margin: 0 auto;
	}
	.bouncedtitle{
		width: 100%;
		line-height: 3rem;
		font-size: 1.3rem;
		text-align: center;
		overflow: hidden;
		
	}
	.bouncedtitle span{
		width: 1rem;
		height: 1rem;
		display: inline-block;
		float: right;
	}
	.bouncedtitle span img{
		width: 100%;
		height: 100%;
	}
	.bounded-ul{
		width: 100%;
	}
	.bounded-li{
		width: 94%;
		overflow: hidden;
		padding: 1rem 3%;
		/*padding: auto 3%;*/
		border-bottom: 1px solid #ccc;
	}
	.bouncedcot-l{
		vertical-align: top;
		float: left;
		width: 4%;
	}
	.bouncedcot-l img{
		width: 100%;
		padding-top:0.2rem;
		
	}
	.bouncedcot-r{
		vertical-align: top;
		float: left;
		width: 92%;
		margin-left: 4%;
	}
	.bouncedcot-r h2{
		color: #E53E42;
		font-weight: 300;
		font-size: 1.3rem;
	}
	.bouncedcot-r p{
		color: #808080;
		font-size: 0.8rem;
		font-weight: 200;
	}
	hr {
		border: none;
		
		border:0.5px solid #ccc;
	}
	.bounded-line{
		border: none;
	}
	
	/*税率说明*/
	.taxation{
		width: 100%;
		height: 50vh;
		background: white;
		position: absolute;
		bottom: 0;	
		display: none;
	}
	.taxationcot{
		width: 94%;
		margin: 0 auto;
	}
	.taxationtitle{
		width: 100%;
		line-height: 3rem;
		font-size: 1.3rem;
		text-align: center;
		overflow: hidden;
		
	}
	.taxationtitle span{
		width: 1rem;
		height: 1rem;
		display: inline-block;
		float: right;
	}
	.taxationtitle span img{
		width: 100%;
		height: 100%;
	}
	
	.taxation-ul{
		width: 100%;
	}
	.taxation-li{
		width: 94%;
		overflow: hidden;
		padding: 1rem 3%;
		border-bottom: 1px solid #ccc;
	}
	.taxationcot-l{
		vertical-align: top;
		float: left;
		width: 20%;
		font-size:1.2rem;
		color: #4d4d4d ;
	}
	.taxationcot-r{
		vertical-align: top;
		float: left;
		width: 75%;
		padding-left: 5%;
	}
	.taxationcot-r h2{
		font-weight: 300;
		font-size: 1.1rem;
	}
	.taxationcot-r p{
		color: #808080;
		font-size: 1rem;
		font-weight: 200;
		margin-top: 0.5rem;
		
	}
	.taxationcot-imp{
		margin: 0 !important;
		font-size: 1.1rem !important;
		color: #4d4d4d !important;
		font-weight: 400 !important;
	}
	.hh{
		display: none;
		position: fixed;
		top: 40%;
		left: 50%;
		margin-left: -20%;
		font-size: 1.5rem;
		padding: 2rem;
		z-index: 99;
		background-color: rgba(0,0,0,0.5);
		color: white;
		border-radius: 0.5rem;
	}
</style>